<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-position: center;
            background-size: cover;
            transition: 0.5s;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }

        .slide-container {
            width: 70vw;
            height: 70vh;
            position: relative;
            /* 关键 */
            overflow: hidden;
        }

        .slide {
            opacity: 0;
            width: 100vw;
            height: 100vh;
            background-position: center;
            background-size: cover;
            position: absolute;
            top: -15vh;
            left: -15vw;
            border: solid;
            z-index: 1;
            transition: 0.5s;
        }

        .slide.active {
            opacity: 1;
        }

        .arrow {
            position: fixed;
            background-color: transparent;
            padding: 20px;
            font-size: 30px;
            /* border: 1px solid black; */
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            outline: none;
            border: 0;
        }

        .arrow-left {
            left: calc(15vw - 70px);
        }

        .arrow-right {
            right: calc(15vw - 70px);
        }
    </style>
</head>

<body>
    <div class="slide-container">
        <div class="slide active" style="background-image: url(./imgs/photo_1.jpg)"></div>
        <div class="slide" style="background-image: url(./imgs/photo_2.jpg)"></div>
        <div class="slide" style="background-image: url(./imgs/photo_3.jpg)"></div>
        <div class="slide" style="background-image: url(./imgs/photo_4.jpg)"></div>
        <div class="slide" style="background-image: url(./imgs/photo_5.jpg)"></div>
        <button class="arrow arrow-left" id="left">👈</button>
        <button class="arrow arrow-right" id="right">👉</button>
    </div>
    <script>
        const body = document.body;
        const slides = document.querySelectorAll('.slide');
        const left = document.getElementById('left');
        const right = document.getElementById('right');

        let activeSlide = 0;

        function moveNext() {
            activeSlide++;

            if (activeSlide == slides.length) {
                activeSlide = 0;
            }
            setActiveSlide();
            setBgToBody();
        };
        right.addEventListener("click", moveNext);
        //   right.onclick = moveNext;
        //   let movePrev = () => {
        function movePrev() {
            activeSlide--;
            //边界处理
            if (activeSlide < 0) {
                activeSlide = slides.length - 1;
            }
            setActiveSlide();
            setBgToBody();
        };
        left.addEventListener("click", movePrev);
        //   left.onclick = movePrev;
        function setBgToBody() {
            body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
        }
        setBgToBody();
        function setActiveSlide() {
            slides.forEach((slide) => slide.classList.remove('active'));
            slides[activeSlide].classList.add('active');
        }

        let timer = setInterval(moveNext, 1000);
        // let timer = null;
        left.onmouseenter = function () {
            clearInterval(timer);
        }
        left.onmouseout = function () {
            clearInterval(timer);
            timer = setInterval(moveNext, 1000);
        }
        right.onmouseenter = function () {
            clearInterval(timer);
        }
        right.onmouseout = function () {
            clearInterval(timer);
            timer = setInterval(moveNext, 1000);
        }
    </script>
</body>

</html>